import React, { Component } from 'react';
import { View } from 'react-native';
import styles from './styles';
import Swiper from 'react-native-swiper';
import SwiperItem from './SwiperItem';

class IndexSwiper extends Component{
  render() {
    // 需要父组件的navigation来实现本组件的屏幕切换跳转
    const { swiperData, navigation } = this.props;
    const swiperHeight = styles.swiperSize.height;

    return (
      <View
        height={swiperHeight}
      >
        {/* 使用第三方轮播图组件 */}
        <Swiper
          height={swiperHeight}
          autoplay={true}
          loop={true}
          paginationStyle={styles.pagination}
          activeDotColor={'#fff'}
        >
          {
            swiperData.map((item, index) => {
              return (
                <SwiperItem
                  data={item}
                  key={index}
                  styles={styles}
                  navigation={navigation}
                />
              );
            })
          }
        </Swiper>
      </View>
    );
  }
}

export default IndexSwiper;